<template>
  <div>
    <!-- header -->
    <div class="app-header">
      <h2 style="font-weight:bold">我的应用</h2>
      <div class="app-header-search">
        <a-input-search placeholder="请输入" enter-button="搜索" size="large" />
      </div>
      <a-menu v-model="current" mode="horizontal">
        <a-menu-item key="app">应用</a-menu-item>
        <a-menu-item key="api">接口</a-menu-item>
        <a-menu-item key="add">添加</a-menu-item>
      </a-menu>
    </div>
    <!-- 项目选择栏 -->
    <div class="my-choseapp">
      所属类目：
      <a-button @click="handleChangeType($event)" id="all">全部</a-button>
      <a-button @click="handleChangeType($event)" id="city">智慧城市</a-button>
      <a-button @click="handleChangeType($event)" id="park">智慧园区</a-button>
      <a-button @click="handleChangeType($event)" id="community">智慧社区</a-button>
      <a-button @click="handleChangeType($event)" id="hotel">智慧酒店</a-button>
      <a-button @click="handleChangeType($event)" id="others">其他</a-button>
    </div>
    <!-- 展示 -->
    <template hoverable="false">
      <a-row type="flex" justify="space-between" class="my-show">
        <a-col :span="5" v-show="whichType === 'all' | whichType === 'city'">
          <a-card class="my-mapcard">
            <img slot="cover" alt="example" src="@/static/images/timg.jpg" />
            <a-card-meta :title="this.data[0].mapName">
              <!-- <p>{{this.data}}</p> -->
              <p slot="description">{{this.data[0].name_m}}</p>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col :span="5" v-show="whichType === 'all' | whichType === 'park'">
          <a-card class="my-mapcard">
            <img slot="cover" alt="example" src="@/static/images/timg.jpg" />
            <a-card-meta :title="this.data[1].mapName">
              <!-- <p>{{this.data}}</p> -->
              <p slot="description">{{this.data[1].name_m}}</p>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col :span="5" v-show="whichType === 'all' | whichType === 'park'">
          <a-card class="my-mapcard">
            <img slot="cover" alt="example" src="@/static/images/timg.jpg" />
            <a-card-meta :title="this.data[3].mapName">
              <!-- <p>{{this.data}}</p> -->
              <p slot="description">{{this.data[3].name_m}}</p>
              <div class="my-card-footer">
                <span> 10 days ago</span>

              </div>
            </a-card-meta>
          </a-card>
        </a-col>
        <a-col :span="5" v-show="whichType === 'all' | whichType === 'community'">
          <a-card class="my-mapcard">
            <img slot="cover" alt="example" src="@/static/images/timg.jpg" />
            <a-card-meta :title="this.data[4].mapName">
              <!-- <p>{{this.data}}</p> -->
              <p slot="description">{{this.data[4].name_m}}</p>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
      
    </template>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

const data = [
  {
    mapName: '海润工业园智慧城市',
    name_m: '这是一段简介1',
  },
  {
    mapName: '海润工业园智慧园区',
    name_m: '这是一段简介2',
  },
  {
    mapName: '海润工业园智慧园区',
    name_m: '这是一段简介2',
  },
  {
    mapName: '海润工业园智慧社区',
    name_m: '这是一段简介3',
  },
  {
    mapName: '海润工业园智慧酒店',
    name_m: '这是一段简介4',
  },
]

export default {
  data() {
    return {
      data,
      current: ['app'],
      whichType: 'all',
    }
  },
  methods: {
    handleChangeType(ev) {
      this.whichType = ev.target.id
      //   console.log(ev.target.id);
      //   console.log(this.$refs)
    },
  },
}
</script>

<style scoped>

button {
  margin: 10px !important;
}
.my-card-footer{
  display: flex;
  height: 20px;
  margin-top: 16px;
  margin-bottom: -4px;
  line-height: 20px;
}
.app-header {
  padding: 10px 20px 0 20px;
  /* margin-right: 10px; */
  height: 140px !important;
  background-color: white !important;
}
.app-header-search {
  width: 40% !important;
  margin-left: 30% !important;
}
.my-choseapp {
  border-radius: 5px;
  margin-top: 15px;
  height: 80px !important;
  background-color: white !important;
  padding: 8px;
}
.my-show {
  margin-top: 20px !important;
}
</style>